<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./download/font/demo.css">
    <link rel="stylesheet" href="./download/font/iconfont.css">
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .box {
            width: 375px;
            height: 600px;
            background-color: rgb(239, 244, 183);
            left: 20px;
            top: 10px;
            position: absolute;
        }

        .tou {
            top: 0;
            width: 375px;
            height: 20px;
        }

        .biao {
            width: 300px;
            position: absolute;
            left: 10px;
            margin: auto 20px;
        }

        .dw {
            font-size: 20px;
        }

        .ls {
            right: 0;
            position: absolute;
            left: 300px;
            top: 4px;
        }

        .srk {
            width: 360px;
            height: 32px;
            border-radius: 50px;
            background-color: rgb(240, 240, 240);
            position: absolute;
            top: 60px;
            left: 10px;
            border: 1px solid transparent;
        }

        .khj {
            position: absolute;
            top: 100px;
            margin: 0 20px;
            width: 339px;
            height: 86px;
        }

        .khj_t {
            width: 100%;
            height: 100%;
        }

        ul,
        ol {
            display: flex;
        }

        ol {
            top: 39px;
        }

        li {
            list-style: none;
            width: 40px;
            height: 40px;
            border-radius: 50px;
            border: 1px solid black;
            margin: 10px 10px;
        }

        .leibie {
            width: 323px;
            margin: 0 26px;
            position: absolute;
            top: 200px;
        }

        .lb_wb {
            font-size: 10px;
            top: 40px;
            position: absolute;
            margin-top: 100px;
        }
        .wz{
            width: 5px;
            height: 5px;
            position: relative;
           
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="../测试/头.png" class="tou">
        <div class="biao">
            <span class="iconfont icon-dingwei dw"></span>
            <span>北京理工大学国防科技园2号楼10层</span>
            <span class="iconfont icon-lingsheng ls"></span>
        </div>
        <div class="sou">
            <input type="text" class="srk" placeholder="   Q   山姆会员商店优惠商品">
        </div>
        <div class="khj">
            <img src="../测试/狂欢节.png" class="khj_t">
        </div>
        <div class="leibie">
            <ul>
                <li></li>
                <div class="wz"><span class="lb_wb">超市便利</span></div>
                <li></li>
                <div class="wz"><span class="lb_wb">菜市场</span></div>
                <li></li>
                <div class="wz"><span class="lb_wb">水果店</span></div>
                <li></li>
                <div class="wz"><span class="lb_wb">鲜花绿植</span></div>
                <li></li>
                <div class="wz"><span class="lb_wb">医药健康</span></div>
            </ul>
            <ol>
                <li><span class="lb_wb">家居时尚</span></li>
                <li><span class="lb_wb">烘焙蛋糕</span></li>
                <li><span class="lb_wb">签到</span></li>
                <li><span class="lb_wb">大牌免运</span></li>
                <li><span class="lb_wb">红包套餐</span></li>
            </ol>
        </div>
    </div>
</body>

</html>